<template>
    <view>
        <my-header></my-header>
        <uni-card>
        <card-header title="任务管理">
        </card-header>
        <view class="tabs">
            <view 
            v-for="tab in tabs" 
            :key="tab.type"
            class="tab-item"
            :style="{backgroundColor: tab.color}"
            @click="activeTab = tab.type"
            >
            <text>{{tab.name}}</text>
            <text class="bold" :style="{color:tab.fontColor}">{{tab.count}}</text>
            </view>
        </view>
        <view class="pd20">
            <view
            class="list-three-icon"
            v-for="item in listItems"
            :key="item.id"
            @click="goto(item)"
        >
            <view class="task-icon" :style="{backgroundColor:item.backgroundColor}">
                <uni-icons
                custom-prefix="iconfont"
                :type ='`icon-${item.type}`' 
                size="20"
                :color = "item.color"
                ></uni-icons>
            </view>
            <view class="item-left">
            <text>{{ item.name }}</text>
            </view>
            <uni-icons type="right" size="20"></uni-icons>
        </view>
        </view>
    </uni-card>
</view>
  </template>
  <script setup>
  import { ref} from 'vue'
  // 标签数据
  const tabs = ref([
    { name: '待提车', type: 'arrival', count: 3, color: '#FFF8E1',fontColor:'#FFC107' },
    { name: '待入库', type: 'departure', count: 2, color: '#E8F5E9',fontColor:'#4CAF50'},
    { name: '待出库', type: 'delivery', count: 1, color: '#FFEBEE',fontColor:'#F44336'},
    { name: '待交车', type: 'delivery', count: 1, color: '#d4e4ff',fontColor:'#2979ff'},
  ])
  const listItems = [
        {
          id: 1,
          name: "待提车",
          link: "/pages/deposit/deposit",
          color: "#FFC107",
          type: "daitiche",
          backgroundColor:'#FFF8E1'
        },
        {
          id: 2,
          name: "待入库",
          link: "/pages/price-maintenance/price-maintenance",
          color: "#4CAF50",
          type: "dairuku",
          backgroundColor:'#E8F5E9'
        },
        {
          id: 3,
          name: "待出库",
          link: "/pages/risk-assurance/risk-assurance",
          color: "#F44336",
          type: "daichuku",
          backgroundColor:'#FFEBEE'
        },
        {
          id: 4,
          name: "待交车",
          link: "/pages/message/message",
          color: "#9C27B0",
          type: "bpm-bpm-vehiclemanagement-drivermanagement-use",
          backgroundColor:'#F3E5F5'
        },
        {
          id: 5,
          name: "已完成",
          link: "/pages/operating-rules/operating-rules",
          color: "#FFC107", 
          type: "White-list",
          backgroundColor:'#FFF8E1'
        }
      ]
  </script>
  <style lang="scss" scoped>
.container{padding:30rpx;}
  .tabs {
    display: flex;
    margin: 30rpx 0;
    gap:20rpx;
    flex-wrap: wrap;  
    .tab-item {
       width:30%;
       box-sizing:border-box;
        padding: 15rpx 0;
        text-align: center;
        border-radius: 10rpx;
        display:flex;                
        flex-direction: column;
        .bold{font-weight:bold;font-size:40rpx;}
    }
  }
  </style>